<!--搅拌和制浆主页-->
<script setup lang="ts">
import Decorator1 from '@/components/common/decorators/TextDecorator1.vue';
import TrafficLight from '@/components/common/devices/TrafficLight.vue';

import PieChart from '@/components/charts/PieChart.vue';
import DeviceFaultChart from '@/components/charts/DeviceFaultChart.vue';
import pulpingMachine from '@/assets/img/pulping-machine.png';
import { onMounted, ref } from 'vue';
import EquipmentLifespan from '@/components/mixing-machine/EquipmentLifespan.vue';
import { useRoute, useRouter } from 'vue-router';
import { getProjectsAsync } from '@/utils/project-api';
import { getPartsAsync } from '@/utils/project-api';
import type { ProjectInfo } from '@/types/ProjectInfo';
import { ElMessage } from 'element-plus';
import type { Part } from '@/types/Part';
import { getPartStatusColor } from '@/utils/device-status-helper';
import type { EquipmentLifespanDataItem } from '@/components/mixing-machine/EquipmentLifespanDataItem';

interface DeviceStatus {
  name: string;
  label: string;
  partId: string;
  status: string;
}

const deviceStatus = ref<DeviceStatus[]>([]);

const isLoading = ref(false);
const openLoading = () => (isLoading.value = true);
const closeLoading = () => (isLoading.value = false);

const anodeMixer = ref<EquipmentLifespanDataItem[]>([]);
const anodeSlurry = ref<EquipmentLifespanDataItem[]>([]);
const cathodeMixer = ref<EquipmentLifespanDataItem[]>([]);
const cathodeSlurryMachine = ref<EquipmentLifespanDataItem[]>([]);
const projectId = ref<string>('');
const projects = ref<ProjectInfo[]>([]);

const route = useRoute();
const router = useRouter();

async function updateProjectAsync() {
  openLoading();
  try {
    const result = await getProjectsAsync(0, 100);
    if (result.isSuccess) {
      projects.value = result.result ?? [];
    } else {
      ElMessage.error(result.message);
    }
  } catch (err) {
    ElMessage.error('项目加载错误！');
    console.error(err);
  } finally {
    closeLoading();
  }
}

async function updatePartsAsync(projectId: string) {
  openLoading();
  try {
    const result = await getPartsAsync(projectId);
    if (result.isSuccess) {
      const parts = result.result ?? [];
      updateDeviceStatusAsync(parts);
      updateParts(parts);
    } else {
      ElMessage.error(result.message);
    }
  } catch (err) {
    ElMessage.error('加载部件错误！');
    console.error(err);
  } finally {
    closeLoading();
  }
}

async function updateDeviceStatusAsync(parts: Part[]) {
  // 筛选出所有子部件的状态
  const childParts = parts.filter((item) => item.partOwnerId != null);
  deviceStatus.value = childParts.map((item) => {
    return {
      name: item.partName,
      label: item.partName.substring(0, 1),
      partId: item.id,
      status: getPartStatusColor(item.partStatus)
    } as DeviceStatus;
  });
}

// 监听项目改变
const projectChange = (nweValue: string) => {
  if (nweValue != '' && nweValue != undefined && nweValue != null) {
    updatePartsAsync(nweValue);
  }
};

onMounted(async () => {
  await updateProjectAsync();
  const routeProjectId = route.query.projectId;
  if (typeof routeProjectId === 'string') {
    projectId.value = routeProjectId;
    projectChange(routeProjectId);
  }
});

function updateParts(parts: Part[]) {
  const parentParts = parts.filter((item) => item.partOwnerId == null);

  const anodeMixerRegex = /^[0-9]{1,3}#阳极搅拌机-[\w]{1,}$/;
  const anodeSlurryRegex = /^[0-9]{1,3}#阳极制浆机-[\w]{1,}$/;
  const cathodeMixerRegex = /^[0-9]{1,3}#阴极搅拌机-[\w]{1,}$/;
  const cathodeSlurryMachineRegex = /^[0-9]{1,3}#阴极制浆机-[\w]{1,}$/;

  anodeMixer.value.length = 0;
  anodeSlurry.value.length = 0;
  cathodeMixer.value.length = 0;
  cathodeSlurryMachine.value.length = 0;

  parentParts.forEach((item) => {
    if (anodeMixerRegex.test(item.partName)) {
      anodeMixer.value.push({
        id: item.id,
        equipmentLifespan: 80,
        partName: item.partName
      } as EquipmentLifespanDataItem);
    }
    if (anodeSlurryRegex.test(item.partName)) {
      anodeSlurry.value.push({
        id: item.id,
        equipmentLifespan: 80,
        partName: item.partName
      } as EquipmentLifespanDataItem);
    }
    if (cathodeMixerRegex.test(item.partName)) {
      cathodeMixer.value.push({
        id: item.id,
        equipmentLifespan: 80,
        partName: item.partName
      } as EquipmentLifespanDataItem);
    }
    if (cathodeSlurryMachineRegex.test(item.partName)) {
      cathodeSlurryMachine.value.push({
        id: item.id,
        equipmentLifespan: 80,
        partName: item.partName
      } as EquipmentLifespanDataItem);
    }
  });
}

const items = [
  { id: 1, image: pulpingMachine },
  { id: 2, image: pulpingMachine }
];

// 异常设备跳转到对应页面
const toDeviceDetail = (item: DeviceStatus) => {
  const { name, partId } = item;
  const param = {
    projectId: projectId.value,
    partId: partId
  };

  // 根据projectName的正则匹配结果确定path
  let path = '';
  if (/^[0-9]{1,3}#阳极搅拌机-[\w]{1,}$/.test(name)) {
    path = '/mixing-process/anode-mixing';
  } else if (/^[0-9]{1,3}#阳极制浆机-[\w]{1,}$/.test(name)) {
    path = '/mixing-process/anode-pulping';
  } else if (/^[0-9]{1,3}#阴极搅拌机-[\w]{1,}$/.test(name)) {
    path = '/mixing-process/cathode-mixing';
  } else if (/^[0-9]{1,3}#阴极制浆机-[\w]{1,}$/.test(name)) {
    path = '/mixing-process/cathode-pulping';
  }
  return;
};
</script>

<template>
  <main class="main-content" v-loading="isLoading" element-loading-text="正在加载页面...">
    <div class="topNav">
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        "
      >
        <Decorator1 style="font-size: 1vw; color: aliceblue">首页</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">故障排查</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">设备点检</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">设备巡检</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">中心ME</Decorator1>
      </div>

      <div class="logContainer">
        <img src="@/assets/svgs/logo_white.svg" width="15%" style="margin-left: 1%" />
      </div>
      <div class="top-form">
        <span>项目名称：</span>
        <el-select class="select-project" @change="projectChange" v-model="projectId">
          <el-option
            v-for="item in projects"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <div class="mainTitleBox">
      <span class="mainTitleSpan">前工序高速制浆机</span>
    </div>
    <div class="leftBox1">
      <div class="boxTitle">阳极搅拌设备</div>
      <div class="chartContainer">
        <div style="height: 100%; width: 100%">
          <el-scrollbar v-if="anodeMixer.length > 0" style="height: 100%; width: 100%">
            <div style="width: 100%; display: flex; flex-wrap: wrap">
              <EquipmentLifespan
                :data="anodeMixer"
                :link="'/mixing-process/anode-mixing'"
                :projectId="projectId"
              />
            </div>
          </el-scrollbar>
          <div v-else class="no-part">暂无该类型的设备</div>
        </div>
      </div>
    </div>
    <div class="leftBox2">
      <div class="boxTitle">阴极搅拌设备</div>
      <div class="chartContainer">
        <el-scrollbar v-if="cathodeMixer.length > 0" style="width: 100%; height: 100%">
          <div style="width: 100%; display: flex; flex-wrap: wrap">
            <EquipmentLifespan
              :data="cathodeMixer"
              :link="'/mixing-process/cathode-mixing'"
              :projectId="projectId"
            />
          </div>
        </el-scrollbar>
        <div v-else class="no-part">暂无该类型的设备</div>
      </div>
    </div>
    <div class="leftBox3">
      <div class="boxTitle">中控系统异常</div>
      <div class="chartContainer">
        <PieChart></PieChart>
        <!-- <div style="height: 100%; width: 100%; background-color: red"></div> -->
      </div>
    </div>
    <div class="centerBox">
      <div class="centerContent" style="height: 100%">
        <el-carousel :interval="4000" arrow="hover" style="height: 100%">
          <el-carousel-item v-for="item in items" :key="item.id">
            <img :src="item.image" alt="Carousel Image" style="height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div style="position: absolute; left: 0; top: 0; height: 100%; width: 100%">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 39%;
            top: -0.5%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >料仓</Border1
          >
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 52%;
            top: 35%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >循环罐</Border1
          >
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 68%;
            top: 70%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >中转罐</Border1
          >
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 25%;
            top: 78%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >制浆机</Border1
          >
        </div>
      </div> -->
    </div>
    <div class="bottomBox">
      <div class="bottomBoxTitle">设备故障率</div>
      <div class="chartContainer">
        <DeviceFaultChart></DeviceFaultChart>
        <!-- <div style="height: 100%; width: 100%; background-color: red"></div> -->
      </div>
    </div>
    <div class="rightBox1">
      <div class="right-box-title">
        <router-link to="/easy-damage-parts/pulping-machine/single">
          <span style="color: white">异常设备</span></router-link
        >
      </div>
      <div class="trafficLightRoot">
        <template v-if="deviceStatus.length > 0">
          <div
            class="trafficLightContainer"
            v-for="item in deviceStatus"
            :key="item.partId"
            @click="toDeviceDetail(item)"
          >
            <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top-start">
              <TrafficLight :color="item.status" class="trafficLight"></TrafficLight>
            </el-tooltip>
            <span class="trafficLightTitle">{{ item.label }}号机</span>
          </div>
        </template>
        <div v-else class="no-part">暂无异常设备</div>
      </div>
    </div>
    <div class="rightBox2">
      <div class="boxTitle">阳极制浆设备</div>
      <div class="chartContainer">
        <div style="height: 100%; width: 100%">
          <el-scrollbar v-if="anodeSlurry.length > 0" style="height: 100%; width: 100%">
            <div style="width: 100%; display: flex; flex-wrap: wrap">
              <EquipmentLifespan
                :data="anodeSlurry"
                link="/mixing-process/anode-pulping"
                :projectId="projectId"
              />
            </div>
          </el-scrollbar>
          <div v-else class="no-part">暂无该类型的设备</div>
        </div>
      </div>
      <!-- <div class="chartContainer">
        <DeviceStatisticalChart></DeviceStatisticalChart>
        <div style="height: 100%; width: 100%; background-color: red"></div>
      </div> -->
    </div>
    <div class="rightBox3">
      <div class="boxTitle">阴极制浆设备</div>
      <div class="chartContainer">
        <div style="height: 100%; width: 100%">
          <el-scrollbar v-if="cathodeSlurryMachine.length > 0" style="height: 100%; width: 100%">
            <div style="width: 100%; display: flex; flex-wrap: wrap">
              <EquipmentLifespan
                :data="cathodeSlurryMachine"
                :link="'/mixing-process/cathode-pulping'"
                :projectId="projectId"
              />
            </div>
          </el-scrollbar>
          <div v-else class="no-part">暂无该类型的设备</div>
        </div>
      </div>
      <!-- <div class="chartContainer">
        <ElectricityChart></ElectricityChart>
        <div style="height: 100%; width: 100%; background-color: red"></div>
      </div> -->
    </div>
  </main>
  <div class="mainBackground"></div>
</template>

<style scoped lang="scss">
$pageFontSize: 30px;
$background-color: transparent;
$border-color: #6167e4;
$font-color: rgb(221.7, 222.6, 224.4);
$hover-color: #409eff;

.percentage-value {
  display: block;
  font-size: 16px;
}

.percentage-label {
  display: block;
  font-size: 12px;
}

/* .centerContent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
} */

.mainBackground {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/img/device-template.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.main-content {
  height: 100%;
  width: 100%;
}

.rightBox1 {
  position: absolute;
  margin-left: 76.6%;
  height: 19%;
  width: 21.52%;
  transform: translateY(63.6%);
  overflow: hidden;
  padding: 0px 2px 0px 2px;

  .right-box-title {
    margin-left: 3px;
    color: white;
    font-size: 0.86vw;
    white-space: nowrap;
    /* 防止文字换行 */
    overflow: hidden;
    /* 隐藏超出容器宽度的部分 */
    text-overflow: ellipsis;
    /* 超出容器宽度的部分显示省略号 */
  }

  .trafficLightRoot {
    width: 100%;
    height: 86%;
    display: flex;
    cursor: pointer;
    padding: 10px;
    overflow-x: auto;
    /* 自定义滚动条样式 */
    /* 针对Webkit内核的浏览器（Chrome、Safari等） */
    &::-webkit-scrollbar {
      height: 8px; /* 滚动条整体高度 */
    }
    &::-webkit-scrollbar-track {
      // background: #c5e4fe; /* 轨道背景色 */
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: #6367de; /* 滑块颜色 */
      border-radius: 4px; /* 滑块圆角 */
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #6367de; /* 滑块悬停颜色 */
    }
  }
}

.rightBox2 {
  position: absolute;
  margin-left: 76.6%;
  height: 28%;
  width: 21.52%;
  transform: translateY(120.5%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex;
  /*使用弹性盒子布局*/
  flex-direction: column;
  /*垂直布局*/
}

.rightBox3 {
  position: absolute;
  margin-left: 76.6%;
  height: 33%;
  width: 21.52%;
  transform: translateY(195%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex;
  /*使用弹性盒子布局*/
  flex-direction: column;
  /*垂直布局*/
}

.leftBox1 {
  position: absolute;
  margin-left: 1.9%;
  height: 27.28%;
  width: 21.52%;
  transform: translateY(44.3%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex;
  /*使用弹性盒子布局*/
  flex-direction: column;
  /*垂直布局*/
}

.leftBox2 {
  position: absolute;
  margin-left: 1.9%;
  height: 26%;
  width: 21.52%;
  transform: translateY(160.4%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex;
  /*使用弹性盒子布局*/
  flex-direction: column;
  /*垂直布局*/
}

.leftBox3 {
  position: absolute;
  margin-left: 1.9%;
  height: 27%;
  width: 21.52%;
  transform: translateY(260.4%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex;
  /*使用弹性盒子布局*/
  flex-direction: column;
  /*垂直布局*/
}

.boxTitle {
  margin-left: 5px;
  color: white;
  font-size: 0.86vw;
  white-space: nowrap;
  /* 防止文字换行 */
  overflow: hidden;
  /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis;
  /* 超出容器宽度的部分显示省略号 */
}

.bottomBoxTitle {
  margin-left: 5%;
  color: white;
  font-size: 0.86vw;
  white-space: nowrap;
  /* 防止文字换行 */
  overflow: hidden;
  /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis;
  /* 超出容器宽度的部分显示省略号 */
}

.mainTitleBox {
  position: absolute;
  margin-left: 50%;
  height: 6%;
  width: 12%;
  transform: translateX(-50%) translateY(95%);
  padding-top: 0.25%;
  /* border: 2px red solid; */
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  /* 防止文字换行 */
  overflow: hidden;
  /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis;
  /* 超出容器宽度的部分显示省略号 */
}

.mainTitleBox .mainTitleSpan {
  font-size: 1vw;
  font-family: Arial, sans-serif;
  /* 选择一个常见的字体作为后备字体 */
  color: aliceblue;
}

.centerBox {
  position: absolute;
  margin-left: 23.4%;
  height: 57.6%;
  width: 53.26%;
  transform: translateY(18%);

  :deep(.el-carousel__container) {
    height: 100%;
    text-align: center;
  }

  /* border: 2px red solid; */
  /* overflow: hidden; */
}

.bottomBox {
  position: absolute;
  margin-left: 25.15%;
  height: 29.1%;
  width: 48.48%;
  transform: translateY(234%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex;
  /*使用弹性盒子布局*/
  flex-direction: column;
  /*垂直布局*/
}

.chartContainer {
  height: 100%;
  width: 100%;
  padding: 10px;
  flex: 1;
  overflow: hidden;
}

.trafficLightContainer {
  height: 100%;
  width: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-right: 10px;
}

.trafficLight {
  height: 100%;
  width: 100%;
  padding: 8%;
}

.trafficLightTitle {
  color: aliceblue;
  font-size: 12px;
  margin-top: 4px;
}

.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.topNav {
  position: absolute;
  height: 8.05%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .top-form {
    position: absolute;
    display: flex;
    align-items: center;
    color: white;
    right: 20px;
    .select-project {
      width: 240px;
      :deep(.el-select__wrapper) {
        background: $background-color;
        box-shadow: 0 0 0 1px $border-color inset;
        &:hover {
          box-shadow: 0 0 0 1px var(--el-color-primary) inset;
        }
        &:active {
          outline: unset;
          box-shadow: 0 0 0 1px white inset;
        }
      }
      :deep(.el-select__placeholder) {
        color: $font-color;
      }
    }
  }
}

.ulNav {
  list-style-type: none;
  display: flex;
}

.ulNav li {
  margin: 0px 20px;
}

.ulNav li:hover {
  cursor: pointer;
  background-color: #580c96;
  /* 添加悬停时的背景色 */
}

.ulNav li a {
  text-decoration: none;
  /* 移除链接的下划线样式 */
  color: inherit;
  /* 继承父元素的字体颜色 */
}

.ulNav li a:hover {
  text-decoration: underline;
  /* 鼠标悬停时添加下划线 */
}

.logContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
}

.no-part {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
  color: white;
  font-size: 0.86vw;
}
</style>
